<template>
    <div class="sh-details">
        <div class="sh-title">
            {{ curRow.requestType }}内容
        </div>
        <!-- {{ curChange }} -->
        <div class="sh-content">
            <div class="sh-changeAfter">
                <table border="1" cellspacing="0" cellpadding="5" class="tableStyle">
                    <tr>
                        <td class="tdFirst">年份</td>
                        <td class="tdSecond">{{ curChange.workYear }}</td>
                    </tr>
                    <tr>
                        <td class="tdFirst">业务类型</td>
                        <td class="tdSecond">{{ curChange.businessType }}</td>
                    </tr>
                    <tr>
                        <td class="tdFirst">主要责任单位</td>
                        <td class="tdSecond">{{ codeToText(curChange, 'mainBusinessUnitOrgCode', 'org') }}</td>
                    </tr>
                    <tr>
                        <td class="tdFirst">相关责任单位</td>
                        <td class="tdSecond">{{ codeToText(curChange, 'businessUnitOrgCodes', 'org') }}</td>
                    </tr>
                    <tr>
                        <td class="tdFirst">分管领导</td>
                        <td class="tdSecond">{{ codeToText(curChange, 'workLeader', 'ld') }}</td>
                    </tr>
                    <tr>
                        <td class="tdFirst">计划状态</td>
                        <td class="tdSecond">{{ curChange.workStatus }}</td>
                    </tr>
                    <tr>
                        <td class="tdFirst">任务类别</td>
                        <td class="tdSecond">{{ curChange.workCategory }}</td>
                    </tr>
                    <tr>
                        <td class="tdFirst">任务大类</td>
                        <td class="tdSecond">{{ curChange.workBigType }}</td>
                    </tr>
                    <tr>
                        <td class="tdFirst">具体工作内容</td>
                        <td class="tdSecond">{{ curChange.workContent }}</td>
                    </tr>
                    <tr>
                        <td class="tdFirst">年度工作计划</td>
                        <td class="tdSecond">
                            <van-field v-if="isPermission" style="background: rgba(242, 243, 245, 1)"
                                v-model="curChange.annualPlan" rows="2" autosize type="textarea"
                                placeholder="请输入各个季度的工作任务" />
                            <span v-else>
                                {{ curChange.annualPlan }}
                            </span>
                        </td>
                    </tr>
                    <tr>
                        <td class="tdFirst">推进完成情况</td>
                        <td class="tdSecond">
                            <van-field v-if="isPermission" style="background: rgba(242, 243, 245, 1)"
                                v-model="curChange.workProgress" rows="2" autosize type="textarea" placeholder="请填写" />
                            <span v-else>
                                {{ curChange.workProgress }}
                            </span>
                        </td>
                    </tr>
                    <tr>
                        <td class="tdFirst">需要说明事项</td>
                        <td class="tdSecond">
                            <van-field v-if="isPermission" style="background: rgba(242, 243, 245, 1)"
                                v-model="curChange.workStatement" rows="2" autosize type="textarea" placeholder="请填写" />
                            <span v-else>
                                {{ curChange.workStatement }}
                            </span>
                        </td>
                    </tr>
                    <tr>
                        <td class="tdFirst">备注</td>
                        <td class="tdSecond">
                            <van-field v-if="isPermission" style="background: rgba(242, 243, 245, 1)"
                                v-model="curChange.workNote" rows="2" autosize type="textarea" placeholder="请填写" />
                            <span v-else>
                                {{ curChange.workNote }}
                            </span>
                        </td>
                    </tr>
                    <tr>
                        <td class="tdFirst">考评内容</td>
                        <td class="tdSecond">
                            {{ curChange.assessmentContent }}

                        </td>
                    </tr>
                </table>
            </div>
            <div class="sh-option">
                <div class="radio-box">
                    <van-radio-group v-model="curChange.approvalStatus" direction="horizontal">
                        <van-radio name="已批准">通过</van-radio>
                        <van-radio name="已拒绝">不通过</van-radio>
                    </van-radio-group>
                </div>
                <div class="sh-pz">
                    <div class="pz-tip">批注：</div>
                    <div class="pz-wrap">
                        <van-field style="background: rgba(242, 243, 245, 1)" v-model="curChange.approvalComment"
                            rows="3" autosize type="textarea" placeholder="请填写" />
                    </div>
                </div>
            </div>
        </div>
        <div class="btn-list">
            <div class="cancel btn btnPointer" @click="router.go(-1)">取消</div>
            <div class="confirm btn btnPointer" @click="onSubmit">提交</div>
        </div>
    </div>
</template>

<script setup>
import { codeToText } from "@/utils/tool"
import { workAppSubmit } from "@/service/yearWork"
import { showSuccessToast, showToast } from "vant"
const route = useRoute()
const router = useRouter()
const curRow = ref({})
const curChange = ref({})
onMounted(() => {
    curRow.value = JSON.parse(route.query.rowData)
    curChange.value = JSON.parse(curRow.value.changeContentAfter)
    curChange.value.approvalStatus = '已批准'
})

function onSubmit() {
    if (!curChange.value.approvalComment) {
        showToast('请填写批注')
        return
    }
    let againChangeContent = {
        "workYear": curChange.value.workYear ?? "",
        "businessType": curChange.value.businessType ?? "",
        "mainBusinessUnitOrgCode": curChange.value.mainBusinessUnitOrgCode ?? "",
        "businessUnitOrgCodes": curChange.value.businessUnitOrgCodes ?? "",
        "workLeader": curChange.value.workLeader ?? "",
        "workStatus": curChange.value.workStatus ?? "",
        "workContent": curChange.value.workContent ?? "",
        "annualPlan": curChange.value.annualPlan ?? "",
        "workProgress": curChange.value.workProgress ?? "",
        "workStatement": curChange.value.workStatement ?? "",
        "workNote": curChange.value.workNote,
        "workCategory": curChange.value.workCategory ?? "",
        "workBigType": curChange.value.workBigType ?? "",
    }
    let params = {
        approvalStatus: curChange.value.approvalStatus, //通过还是不通过
        approvalComment: curChange.value.approvalComment, //批注
        objectId: curRow.value.objectId,
    }
    //新增且是第一级审核人则可以更改，否则就是只填写通过和不通过
    if (curRow.value.approvalLevel == 1 && curRow.value.requestType == '新增') {
        params.againChangeContent = againChangeContent
    }
    workAppSubmit(params).then(res => {
        if (res.code == 0) {
            showSuccessToast('提交成功')
            router.go(-1)
        }
    })


}

const isPermission = computed(() => {
    return curRow.value.approvalLevel == 1 && curRow.value.requestType == '新增'
})

</script>

<style lang="scss" scoped>
.sh-details {
    color: rgba(51, 51, 51, 1);
    padding: 0 26px;
    box-sizing: border-box;
    overflow-y: scroll;
    height: calc(100vh - 92px - 10px);
    // border-radius: 30px 30px 0px 0px;
    background: rgba(255, 255, 255, 1);
    box-shadow: 0px -8px 10px 4px rgba(218, 231, 245, 0.5);

    .sh-title {
        font-size: 36px;
        font-weight: bold;
        color: rgba(51, 51, 51, 1);
        margin: 20px 0;
    }

    .sh-content {
        .sh-changeAfter {
            height: calc(100vh - 92px - 500px);
            overflow: scroll;
        }
    }

    .sh-option {
        margin-top: 20px;
    }

}


.tableStyle {
    font-size: 28px;
    width: 100%;
    border-collapse: collapse;
    border: 1px solid #ddd;

    .tdFirst {
        padding: 8px;
        border: 1px solid #ddd;
        font-weight: bold;
        width: 30%;
        background-color: #f5f5f5;
    }

    .tdSecond {
        padding: 8px;
        border: 1px solid #ddd;
    }
}

.sh-option {
    .radio-box {
        margin: 20px 0;
        display: flex;
        justify-content: center;
    }
}

::v-deep(.tdSecond > .van-cell.van-field) {
    padding: 0 !important;
}


.sh-pz {
    display: flex;
    align-items: center;

    .pz-tip::before {
        content: '*';
        color: red;
        margin-right: 5px;
    }

    .pz-wrap {
        width: 80%;
    }

}

.btn-list {
    display: flex;
    justify-content: center;
    margin: 20px 0;

    .cancel {
        width: 144px;
        height: 76px;
        opacity: 1;
        border-radius: 50px;
        background: rgba(255, 255, 255, 1);
        border: 2px solid rgba(221, 221, 221, 1);
        font-size: 28px;
        color: rgba(166, 166, 166, 1);
    }

    .confirm {
        margin-left: 24px;
        width: 144px;
        height: 76px;
        border-radius: 50px;
        background: linear-gradient(160.78deg, rgba(0, 160, 252, 1) 0%, rgba(8, 173, 255, 1) 100%), linear-gradient(90deg, rgba(47, 135, 229, 1) 0%, rgba(97, 184, 246, 1) 100%);
        font-size: 28px;
        color: rgba(255, 255, 255, 1);
    }

    .btn {
        display: flex;
        align-items: center;
        justify-content: center;
    }
}
</style>